<template>
  <div :id="id" class="my-gauge w-full h-full text-center"></div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    props: {
      id: {
        type: String | Number,
        required: true,
      },
      value: {
        type: Number,
        required: true,
      },
      isScreen: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      value: {
        handler(nv) {
          this.$nextTick(this.draw)
        },
        immediate: true,
      },
    },
    methods: {
      draw() {
        var myChart = echarts.init(document.getElementById(this.id))
        const option = {
          series: [
            {
              type: 'gauge',
              center: ['50%', '55%'],
              radius: '90%',
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.25, '#67C23A'],
                    [0.5, '#409EFF'],
                    [0.75, '#E6A23C'],
                    [1, '#F56C6C']
                  ]
                }
              },
              pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '18%',
                width: 10,
                offsetCenter: [0, '-40%'],
                itemStyle: {
                  color: 'auto'
                }
              },
              axisTick: {
                length: 6,
                distance: 5,
                splitNumber: 2,
                lineStyle: {
                  color: 'auto',
                  width: 1
                }
              },
              splitLine: {
                length: 10,
                distance: 5,
                lineStyle: {
                  color: 'auto',
                  width: 2
                }
              },
              axisLabel: {
                color: '#aaa',
                fontSize: 12,
                distance: -30,
                rotate: 'tangential',
                formatter: function (value) {
                  // if (value === 20) {
                  //   return '一级';
                  // } else if (value === 40) {
                  //   return '二级';
                  // } else if (value === 60) {
                  //   return '三级';
                  // } else if (value === 80) {
                  //   return '四级';
                  // }
                  return '';
                }
              },
              detail: {
                fontSize: this.isScreen ? 14 : 20,
                offsetCenter: [0, 0],
                valueAnimation: true,
                formatter: function (value) {
                  if (value == 10) {
                    return '优秀';
                  } else if (value == 37.5) {
                    return '良好';
                  } else if (value == 50) {
                    return '达标';
                  } else if (value == 70) {
                    return '不满足';
                  }
                  return '';
                },
                color: 'inherit'
              },
              data: [
                {
                  value: this.value,
                }
              ]
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
    },
  }
</script>

<style lang="scss">
.my-gauge {
  div {
    margin: auto !important;
  }
}
</style>